<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>抽奖页面</title>
	<style type="text/css">
		body,
		div {
			font-size: 14px;
			margin: 0px;
			padding: 0px;
		}

		#big {
			/* 一行8个 */
			/* width: 1080px; */
			/* 一行9个 */
			/* width: 1210px; */
			/* 一行10个 */
			/* width: 1340px; */
			min-width: 672px;
			max-width: 1340px;
			height: 400px;
			margin: 0px auto auto auto;
		}

		#cj {
			text-align: center;
			height: 80px;
			line-height: 40px;
		}

		#lblResult {
			display: block;
			text-align: center;
			color: #F00;
			font-weight: bold;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<div id="cj">
		<input id="btn1" type="button" value="开始抽奖" onclick="CJ();">
		<input type="button" value="重新开始" onclick="window.location.reload();">
		<span id="lblResult"></span>
	</div>
	<div id="big">
	</div>
	<script language="javascript">
		// var arr = ["涂康", "孙乾", "岳帅", "何康", "喻浩然", "袁野", "徐子成", "吴旭光", "汤小波", "黄思婷", "吴志博", "耿月", "柯善茂", "钱新辉", "杨造林", "杨书铭", "余浩楠", "张江宇", "姜凯译", "赵帅", "杨康", "熊雨", "夏熙贵", "王文锦", "胡五凤", "江昊", "杜江", "杜浩", "甘子庚", "李兆鹏", "朱超", "赵子云", "赵宁", "江兰", "张子豪", "王佳欣", "王家恒", "林洁梅", "成梓", "向旺", "李敏", "彭宇豪", "梅镒丰", "李小辉", "谢为韩", "刘志高", "周淼", "程艺清", "罗长森", "蔡光伟", "李斯达", "严志豪", "刘江", "彭少怡", "严思航", "王雄", "李昱晨", "李航", "李静", "吴小雪", "杜振", "周海松", "刘忆", "李琦", "缪焱鑫", "田朦", "黄琴韵", "管友仁", "修俊朝", "张怡", "许方根", "李迎龙", "张悦", "陈子扬", "胡玲康", "朱文春", "李思琪"];

		// var arr = ['汤小波', '吴旭光', '徐子成', '杨造林', '向旺', '李航', '成梓', '江昊', '袁超伟', '刘江', '彭少怡', '耿月', '黄思婷', '王泽航', '何康', '袁野', '周贤', '周淼', '程艺清', '卢露', '喻浩然', '刘茜梦', '敖波', '张仔伟', '徐竟超', '王志强', '董建峰', '张阳星', '吴睿', '杜硕', '安文浩', '杜振', '卢贤聪', '梅镒沣', '李小辉', '昝彬', '程心知', '岳梦兰', '张政毅', '徐仁祥', '陈实', '刘运', '胡智凡', '袁振', '余志康', '何梦甜', '梅雅莉', '秦婕妤', '王佳欣', '王家恒', '罗若妍', '王品', '涂康', '罗长森', '陈子扬', '张绍林', '张政', '袁修魏', '李栓子', '杨景程', '李斯琪', '缪焱鑫', '王熠飞', '孙乾', '周青', '袁帅', '刘小宝', '杨康', '胡航', '胡五凤', '熊雨', '修俊朝', '孙佳辉', '江成超', '夏熙贵', '周宇', '柯珮瑶', '王雄', '蔡光伟', '陈浩坤', '李杰', '郑志亮'];

		var arr = ['闵志云', '吴海波', '胡景枘', '易鸣', '胡样', '彭冲', '何爽', '江昊', '刘康', '张梓歆', '沈克颖', '付永华', '王杰', '杨成峰', '袁超伟', '王捷成', '唐正帅', '邓婵', '梅雅莉', '秦婕妤', '梁豪', '韩林俊', '顾卓睿', '徐苏勇', '李若丹', '张利', '涂琰', '谈华萌', '陈康', '鲁生康', '王广广', '江文涛', '李振才', '程火云', '张斌浩', '彭琴琴', '夏婕婷', '邹家冬', '王品', '胡守晨', '刘少源', '易艳林', '刘靖怡', '吴红艳', '杨宜', '罗家恒', '卢贤聪', '张政毅', '代正龙', '王盼', '涂钰', '汤新定', '鄢洲庭', '黄涵伟', '王波', '胡安武', '张淳', '黄鑫', '周航', '黎帆', '陈增强', '陈鑛鑫', '孙利强', '江承龙', '夏熙贵', '余木子', '万婷婷', '熊珊', '罗鹏燕', '伍志坚', '舒迪'];


		arr.sort(() => {
			return Math.random() - Math.random();
		})

		var isStart = false;
		var selectedList = [];

		for (var i = 1; i <= arr.length; i++) {
			var obj = document.createElement("div");
			obj.id = "myDiv" + i;
			Object.assign(obj.style, { border: "2px solid #F39", width: "130px", height: "65px", lineHeight: "70px", float: "left", textAlign: "center" });
			obj.innerHTML = arr[i - 1];
			document.getElementById("big").appendChild(obj);
		}


		var INow = Math.ceil(Math.random() * arr.length);             //定义开始位置在1到37之间取随机数，及当前的div位置
		var IAgo;
		var ISum = Math.ceil(Math.random() * 37) + 70;          //定义71到110之间的随机数规定抽奖的次数
		var ISumEnd = Math.ceil(Math.random() * 10) + 3;        //定义抽奖慢慢移动的次数
		var ICount = 1;                                     //定义当前抽奖摇奖次数
		var interval;


		function cjStart() {
			var objNow = document.getElementById("myDiv" + INow);   //获得当前div并设置
			if (!objNow.classList.contains("selected")) {
				objNow.style.backgroundColor = "#F6C";
			}
			if (INow == 1)
				IAgo = arr.length;
			else
				IAgo = INow - 1;

			var objAgo = document.getElementById("myDiv" + IAgo);    //获取上一个div并设置
			if (!objAgo.classList.contains("selected")) {
				objAgo.style.backgroundColor = "#fff";
			}
			if (INow == arr.length)
				INow = 0;


			if (ICount >= ISum)                                   //循环次数如果到了直接清除定时器
			{
				clearInterval(interval);
				interval = setInterval(cjEnd, 500);
			}
			INow++;
			ICount++;
		}

		function cjEnd() {
			var objNow = document.getElementById("myDiv" + INow);   //获得当前div并设置
			if (!objNow.classList.contains("selected")) {
				objNow.style.backgroundColor = "#F6C";
			}
			if (INow == 1)
				IAgo = arr.length;
			else
				IAgo = INow - 1;

			var objAgo = document.getElementById("myDiv" + IAgo);    //获取上一个div并设置
			if (!objAgo.classList.contains("selected")) {
				objAgo.style.backgroundColor = "#fff";
			}
			if (INow == arr.length)
				INow = 0;


			if (ICount >= ISum + ISumEnd) {
				clearInterval(interval);
				//document.getElementById("btn1").disabled = 'true';
				var objResult = document.getElementById("lblResult");
				var obj = document.getElementById("myDiv" + INow);
				selectedList.push(obj.innerHTML);
				obj.classList.add("selected");
				objResult.innerHTML = selectedList.join(",") + ",恭喜您，中奖了!"
				isStart = false;
			}

			INow++;
			ICount++;
		}

		function CJ() {
			if (isStart) return false;
			INow = Math.ceil(Math.random() * arr.length);             //定义开始位置在1到37之间取随机数，及当前的div位置
			IAgo;
			ISum = Math.ceil(Math.random() * 37) + 70;          //定义71到110之间的随机数规定抽奖的次数
			ISumEnd = Math.ceil(Math.random() * 10) + 3;        //定义抽奖慢慢移动的次数
			ICount = 1;                                          //定义当前抽奖摇奖次数
			clearInterval(interval);
			interval = null;
			isStart = true;
			interval = setInterval(cjStart, 50);
		}

	</script>
</body>

</html>